<template>
  <div class="security-page">
    <ResponsiveNav />

    <div class="page-content">
      <!-- 面包屑导航 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/account' }">
              <i class="fas fa-chevron-left"></i> {{ $t('返回账户') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('登录与安全') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 页面标题区域 -->
      <div class="page-header">
        <div class="title-section">
          <h1>{{ $t('登录与安全') }}</h1>
          <p class="subtitle">{{ $t('管理您的密码和账户访问设置') }}</p>
        </div>
      </div>

      <!-- 主要内容区 -->
      <div class="content-wrapper">
        <!-- 登录设置卡片 -->
        <div class="security-card main-card">
          <div class="card-header">
            <h2><i class="fas fa-lock"></i> {{ $t('登录设置') }}</h2>
            <p class="description">{{ $t('管理您的登录凭据和验证方式') }}</p>
          </div>

          <div class="settings-list">
            <!-- 密码设置 -->
            <div class="setting-item">
              <div class="setting-icon">
                <i class="fas fa-key"></i>
              </div>
              <div class="setting-info">
                <label>{{ $t('登录密码') }}</label>
                <!-- <p class="status">{{ $t('上次修改') }}：{{ lastPasswordChange }}</p> -->
              </div>
              <el-button
                type="primary"
                link
                class="edit-btn"
                @click="handlePasswordChange"
              >
                {{ $t('修改') }} <i class="fas fa-chevron-right"></i>
              </el-button>
            </div>

            <!-- 资金密码 -->
            <div class="setting-item">
              <div class="setting-icon">
                <i class="fas fa-wallet"></i>
              </div>
              <div class="setting-info">
                <label>{{ $t('资金密码') }}</label>
                <p class="status" :class="{ 'enabled': hasFundPassword }">
                  <i :class="hasFundPassword ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
                  {{ hasFundPassword ? $t('已设置') : $t('未设置') }}
                </p>
              </div>
              <el-button
                type="primary"
                link
                class="edit-btn"
                @click="handleFundPasswordSetup"
              >
                {{ hasFundPassword ? $t('修改') : $t('设置') }} <i class="fas fa-chevron-right"></i>
              </el-button>
            </div>

            <!-- 双重认证 -->
           <!-- <div class="setting-item">
             <div class="setting-icon">
               <i class="fas fa-shield-alt"></i>
             </div>
             <div class="setting-info">
                <label>{{ $t('双重认证') }}</label>
             <p class="status" :class="{ 'enabled': twoFactorEnabled }">
                 <i :class="twoFactorEnabled ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
                 {{ twoFactorEnabled ? $t('已开启') : $t('未开启') }}
               </p>
            </div>
             <el-button
                type="primary"
                link
               class="edit-btn"
               @click="handleTwoFactorSetup"
            >
              {{ twoFactorEnabled ? $t('管理') : $t('设置') }} <i class="fas fa-chevron-right"></i>
          </el-button>
           </div> -->
          </div>
        </div>

        <!-- 安全设置卡片 -->
        <div class="security-card main-card">
          <div class="card-header">
            <h2><i class="fas fa-shield-alt"></i> {{ $t('安全设置') }}</h2>
            <p class="description">{{ $t('管理账户安全和隐私选项') }}</p>
          </div>

          <div class="settings-list">
            <!-- 登录通知 -->
            <div class="setting-item">
              <div class="setting-icon">
                <i class="fas fa-bell"></i>
              </div>
              <div class="setting-info">
                <label>{{ $t('登录通知') }}</label>
                <p class="status" :class="{ 'enabled': loginNotificationsEnabled }">
                  <i :class="loginNotificationsEnabled ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
                  {{ loginNotificationsEnabled ? $t('已开启') : $t('未开启') }}
                </p>
              </div>
              <el-switch
                v-model="loginNotificationsEnabled"
                @change="handleLoginNotificationsChange"
              />
            </div>

            <!-- 登录历史 -->
<!--            <div class="setting-item">-->
<!--              <div class="setting-icon">-->
<!--                <i class="fas fa-history"></i>-->
<!--              </div>-->
<!--              <div class="setting-info">-->
<!--                <label>{{ $t('登录历史') }}</label>-->
<!--                <p class="status">{{ $t('查看最近的登录活动') }}</p>-->
<!--              </div>-->
<!--              <el-button-->
<!--                type="primary"-->
<!--                link-->
<!--                class="edit-btn"-->
<!--                @click="handleLoginHistory"-->
<!--              >-->
<!--                {{ $t('查看') }} <i class="fas fa-chevron-right"></i>-->
<!--              </el-button>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import Footer from '@/components/Footer.vue'
import {useI18n} from "vue-i18n";
const { t } = useI18n();
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

// console.log(userStore.userInfo,'userInfo');

const router = useRouter()

// 模拟数据
const lastPasswordChange = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
const twoFactorEnabled = ref(false)
const hasFundPassword = ref(userStore.userInfo?.wallet?.walletPassword);

const loginNotificationsEnabled = ref(true)

// 处理函数
const handlePasswordChange = () => {
  router.push('/account/security/password')
}

const handleFundPasswordSetup = () => {
  // if (!twoFactorEnabled.value) {
  //   ElMessage.warning('请先绑定谷歌验证器')
  //   router.push('/account/security/2fa')
  //   return
  // }
  router.push('/account/security/fund-password')
}

const handleTwoFactorSetup = () => {
  router.push('/account/security/2fa')
}

const handleLoginHistory = () => {
  router.push('/account/security/history')
}

const handleLoginNotificationsChange = (value: boolean | string | number) => {
  ElMessage.success(`${t('登录通知已')}${value ? t('开启') : t('关闭')}`)
}
onMounted(async () => {
  userStore.getInfo();
})
</script>

<style lang="scss" scoped>
.security-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  padding: 32px 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.page-nav {
  margin-bottom: 24px;

  .breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565656;
        font-weight: normal;
        font-size: 14px;

        &:hover {
          color: #c45500;
        }

        i {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

.page-header {
  margin-bottom: 32px;

  .title-section {
    h1 {
      font-size: 28px;
      color: #111;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .subtitle {
      color: #666;
      font-size: 14px;
    }
  }
}

.content-wrapper {
  display: grid;
  gap: 24px;
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 24px;

  .card-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;

    h2 {
      font-size: 18px;
      color: #111;
      font-weight: 500;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        color: #666;
      }
    }

    .description {
      color: #666;
      font-size: 14px;
    }
  }
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 8px;
  width: 100%;

  .setting-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    i {
      font-size: 20px;
      color: #666;
    }
  }

  .setting-info {
    flex: 1;
    min-width: 0;

    label {
      font-size: 15px;
      color: #111;
      margin-bottom: 4px;
      display: block;
    }

    .status {
      font-size: 13px;
      color: #666;
      display: flex;
      align-items: center;
      gap: 4px;

      &.enabled {
        color: #52c41a;
      }

      &.disabled {
        color: #ff4d4f;
      }

      i {
        font-size: 12px;
      }
    }
  }

  .edit-btn {
    flex-shrink: 0;
    font-size: 14px;

    i {
      font-size: 12px;
      margin-left: 4px;
    }
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .page-header {
    .title-section {
      h1 {
        font-size: 24px;
      }
    }
  }

  .main-card {
    padding: 16px;
  }

  .setting-item {
    padding: 12px;

    .setting-icon {
      width: 32px;
      height: 32px;

      i {
        font-size: 16px;
      }
    }
  }
}
</style>
